<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJS 4.2教程-07：Ext.Direct调用服务端后台方法</title>
<!-- 在使用ExtJS的时候，我们必须要引用脚本和样式两部分。 脚本的内容可以通过bootstrap.js来自动添加 -->
<script src="../js/extjs 4.2.1/bootstrap.js"></script>
<!-- 引入汉语的本地化文件 -->
<script src="../js/extjs 4.2.1/locale/ext-lang-zh_CN.js"></script>

<!-- 【★第一步：先引入js文件。此处引入Java后台通过DierctJNgine的引擎自动生成的模块*Api.js ★】-->
<script type="text/javascript" src="../test/testApi.js"></script>
<script type="text/javascript" src="../demo/demoApi.js"></script>

<!-- neptune 是在4.2中新增的样式，看上去比较现代一些，但不支持IE6 -->
<link href="../js/extjs 4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<style type="text/css">
.pollingDiv{
    height: 100%;
    color:red;
    background-color: #CCCCCC;
    display: block;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
	
	/*
	* 第二步：通过Ext.Drect注册服务器端方法
	* 为使Extjs能够调用java方法，需要注册一个远程供应器。
	* 注册的是：引入的Java后台自动生成的js文件,具体注册名请详见生成好的*Api.js文件；如：testApi.js。
	*/
	Ext.Direct.addProvider(
	           Ext.test.REMOTING_API,
	           Ext.demo.REMOTING_API
	    );

	var text = new Ext.form.TextField({//输入参数容器
	    fieldLabel:"输入内容",
	    width:230
	});

	var out1 = new Ext.form.DisplayField({ //输出内容容器
	        cls: 'x-form-text',
	        fieldLabel:"输出内容",
	        width:230
	});
	var out2 = new Ext.form.DisplayField({ //输出内容容器
        cls: 'x-form-text',
        fieldLabel:"输出内容",
        width:230
	});

	var btn =  new Ext.Button({ //触发调用事件
	    text:"调用Java方法",
	    handler:function(){
	        var value = text.getValue();
	        
	        /*
	        * 第三步：调用已经注册好的服务端方法。
	        * 调用格式：后台类名.方法名(参数1,参数2,参数3,...,回调方法接受返回值fucntion(result,e){
	        *	                        result : 接受的后台方法返回值。
	        *                          e : 事件状态 和 事件信息。
	        *	                  })
	        */
	        TestAction.doEcho(value,function(result ,e){  //这里是调用方法
	           var t = e.getTransaction();
	           var content = Ext.String.format('成功调用{0}.{1} ，返回数据为:{2}',t.action,t.method,result);
	           out1.setValue(content);
	        });
	        var user = {
                    firstName : "尼古拉斯",
                      lastName : "赵四",
                      age : 18 
             }
	        TestAction.showDetails(user,function(result ,e){  //这里是调用方法
	               var t = e.getTransaction();
	               var content = Ext.String.format('成功调用{0}.{1} ，返回数据为:{2}',t.action,t.method,result);
	               out2.setValue(content);
            });
	        
	        TestAction.showListDetails("return JSONText Test!", new Array("Saab","Volvo","BMW"),666,
	        		function(result,e){
	        	           var backObj = e.getTransaction();
	        	           console.log("result：");
	        	           console.log(result);
	        	           var content = Ext.String.format('成功调用{0}.{1}成功!',backObj.action,backObj.method);
	        	           console.log(content);
	        	           //var json = result ? Ext.decode(result) : {};
	        	           var json = result;
	        	           console.log(json);
	        	           for(var i=0; i<json.length;i++){
	        	        	   console.log("firstName : "+json[i].firstName);
	        	        	   console.log("lastName : "+json[i].lastName);
	        	        	   console.log("age : "+json[i].age);
	        	           }
	        });
	        
	    }
	});

	var panel = new Ext.form.FormPanel({
	    //title:"简单Ext.Direct例子",
	    //collapsible: true,  //可折叠
	    width:400,
	    autoScroll: true,   //自动创建滚动条
	    defaults: {
	        anchor: '90%',
	    },
	    fieldDefaults: {
	        labelWidth: 80,
	        labelAlign: "left",
	        flex: 1,
	        margin: 5
	    },
	    items:[text,out1,out2],
	    bbar:[btn]
	});
	
	 var  testWin = Ext.create("Ext.window.Window",{
        title : "窗口测试",
        width : 400,
        height : 200,
        items:[panel]
    }); 
	 testWin.show();
	 
	 /*
      * 第四步：轮询方法的创建与调用。
      */
	 
	 //四.①创建一个轮询方法   类型为：Ext.direct.PollingProvider
	 var polling = Ext.create('Ext.direct.PollingProvider', {
		    id: 'GetMessagePolling',//指定该轮询的唯一ID
		    url: Ext.demo.POLLING_URLS.message,//要请求的URL,demo中轮询url里面的message事件方法(java后台注册的事件名称)
		    type: 'polling',//类型为轮询类型
		    interval: 5000,//时间间隔：每5秒执行一次请求，请求上面的url.
		    baseParams:{ //请求参数
		    	data:'Polling'
		    },
		    listeners: {//监听data事件，获取后台传回来的数据.
		    	/*
		    	* data 返回方法中的 Parameters
		    	*    1.provider : Ext.direct.Provider 此Provider对象.
		    	*    2.e : Ext.direct.Event  发生的事件类型. 可以通过e.getData()方法获取返回的原数据.Object类型。
		    	*    event包含下面这些属性
		    	*             data - 服务器方法的返回值 e.data
		    	*             name - 事件名称  e.name
		    	*             status - true方法调用成功，false方法调用失败  e.status
		    	*             type - 'event' 或 'exception' 如果调用失败  e.type
		    	*    3.eOpts : Object  The options object passed to Ext.util.Observable.addListener.
		    	**/
		        data: function (provider, e, eOpts) {
		        	if(e.status){
		        		console.info(e.getData());
	                    console.info(e.data);
	                    var backMsg = e.data+'<br>';
	                    //Ext.get(id),相当于document.getElementById(id);获取指定id的组件。
	                    var divP = Ext.get("PollingProvider");
	                    console.info(divP);
	                    divP.el.dom.innerHTML += backMsg;
		        	}
		        }
		    }
		});
		//启动连接
		polling.connect();
		//关闭连接
        //polling.disconnect();
		
		/* 
		  //获取指定ID的轮询类(即轮询方法)
		  var dp = Ext.Direct.getProvider('GetMessagePolling'); 
		  //断开访问链接
		  dp.disconnect(); 
		  //使用此方法可以单独设置polling间隔时间 
		  dp.connect.defer(2000, dp); 
		  //将会返回服务提供者实例
		  Ext.direct.Manager.getProvider('myPollingProvider');
		*/ 
		  
	   /**
	    *   还可以如下方法调用：
	    *
		*   var pollProvider = new Ext.direct.PollingProvider({  
	    *       type:'polling',  
	    *       url: Ext.demo.POLLING_URLS.message  
	    *     });  
		*           
	    *     pollProvider.addListener('data', callback, scope);
		      通过监听data事件，传入回调函数再回调函数中处理，注意作用域。
	    */
	      var pollProvider2 = Ext.create('Ext.direct.PollingProvider', {
	            url: Ext.demo.POLLING_URLS.message2,//要访问的轮询url
	            type: 'polling',//轮询类型
	            interval: 5000,//重复间隔时间
	            baseParams:{//请求参数
	                data:'Polling'
	            },
	            id: 'GetMessage'//指定id
	        });
		 //给pollProvider2轮询方法添加data监听，回调方法接受返回参数。
	      pollProvider2.addListener('data', function(provider, e, eOpts){
	            if(e.status){//执行状态false OR true
	                var backMsg = e.data+'<br>';//e.data返回参数
	                var divP = Ext.get("PollingProvider");
	                divP.el.dom.innerHTML += backMsg;
	            }
	        }, this);
	      pollProvider2.connect();//执行链接，表示正式启动。
	
});

</script>

</head>
<body>
<h1 align="center">ExtJS 4.2教程-07：Ext.Direct</h1>
<p>
Ext.Direct 提供了一种使用Javascript 调用服务器端方法的机制，它与服务器端技术无关，因此可以在php、java、.net 等众多平台中使用该技术。
</p><br>
<p>
我们本节中将以RemotingProvider 为例进行讲解。
</p><br>
对于RemotingProvider 的执行流程，大致上是：<br>
1.定义API，并将API添加到Ext.direct.Manager，然后我们将通过调用API来执行远程请求。<br>
2.请求过程中，ExtJS 将创建一个Ajax 请求，将Remoting有关的数据发送到服务器的Remoter页面，<br>
3.Remoter将对其进行分流，根据action（对应类名）、method（对应方法名）调用不同的方法，完成执行调用后，将封装好的结果返回给客户端。

<br>

<div id="PollingProvider" class="pollingDiv">
        轮询访问后台数据显示区：<br/>
</div>

</body>
</html>